.app-post-list {
  list-style: none;
  margin-right: 20px;
  padding: 0;
  li {
    margin: 36px 0;
    border-bottom: solid 1px #dedede;
  }
  .title {
    text-decoration: none;
    color: #0b353f;
    font-size: 23px;
    &:hover {
      color: #1d8092;
    }
  }
  .info {
    padding: 20px 0;
    font-size: 14px;
    color: #919491;
    span {
      margin-right: 23px;
    }
    i {
      margin-right: 3px;
    }
    a {
      text-decoration: none;
      color: #919491;
    }
  }
}

.app-post-detail {
  margin: 40px 0 120px 0;
  .title {
    color: #0b353f;
    font-size: 28px;
    border-bottom: solid 1px #e9e9e9;
    padding-bottom: 20px;
    margin-bottom: 40px;
  }
  .info {
    margin-bottom: 38px;
    a {
      text-decoration: none;
    }
  }
  .published_time {
    color: #0e525f;
  }
  .body {
    padding-right: 16px;
    color: #142630;
  }
  img {
    max-width: 100%;
  }
  p {
    line-height: 26px;
    margin: 18px 0;
  }
  li {
    margin: 10px 0;
  }
  h2, h3 {
    border-bottom: solid 1px #c9c9c9;
    padding: 14px 0;
  }
  a {
    color: #3e6f7c;
    margin: 0 4px;
  }
  code {
    margin: 0 8px;
    font-size: 14px;
    padding: 0 6px;
    background-color: #e1e1e1;
  }
  pre {
    font-size: 14px;
    padding: 20px;
    box-shadow: 0 0 4px #000 inset;
    border-radius: 6px;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  blockquote {
    color: #464646;
    font-size: 14px;
    margin: 28px 0;
    padding: 6px 0 6px 34px;
    border-left: solid 6px #4d91a1;
    background-color: #f9f9f9;
    line-height: 21px;
  }
}

@media handheld, only screen and (max-width: 768px) {
  .app-post-list {
    margin-right: 0;
    .title {
      font-size: 16px;
    }
  }
}